<template>
    <div class="loginBar">
        <form>
            <div class="input-bar-item">
                <div class="label phone-label">
                    <svg class="icon" :aria-hidden="true">
                        <use xlink:href="#icon-shoujihao"></use>
                    </svg>
                    <span>手机号码</span>
                </div>
                <div class="input-bar">
                    <input type="number" name="mobile" placeholder="请输入账号/手机号" v-model="formData.mobile" data-vv-as="手机号" v-validate="'required|mobile'" @input="isGiveWayMobile=true">
                    <p role="alert" v-show="errors.has('mobile') || !isGiveWayMobile" class="toast-text-style">
                        <svg class="icon" v-show="true" aria-hidden="true">
                            <use xlink:href="#icon-gantanhao"></use>
                        </svg>
                        {{ errors.first('mobile') }}
                        {{ !isGiveWayMobile ? '该手机号未注册' : '' }}
                    </p>
                    <div class="font-item">
                        <svg class="icon" v-show="false" aria-hidden="true">
                            <use xlink:href="#icon-qingchu"></use>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="input-bar-item">
                <div class="label">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yanzhengma"></use>
                    </svg>
                    <span>验证码</span>
                </div>
                <div class="input-bar">
                    <input type="text" v-model="formData.verifyCode" placeholder="请输入验证码" @input="isGiveWayVerify = true">
                    <p role="alert" class="toast-text-style" v-show="!isGiveWayVerify">
                        <svg class="icon" v-show="true" aria-hidden="true">
                            <use xlink:href="#icon-gantanhao"></use>
                        </svg>
                        {{ !isGiveWayVerify ? '验证码输入错误' : '' }}
                    </p>
                    <div class="verify">
                        <span v-if="!isSend" @click="sendVerify" :style="{color: colorStyle}">获取验证码</span>
                        <span v-else style="color: #6f9ae6">重新获取({{ timeOut }}s)</span>
                    </div>
                </div>
            </div>
        </form>
        <btn @handleSubmit="handleSubmit" v-bind:user="user">立即登录</btn>
        <slot></slot>
    </div>
</template>

<script>
    // 使用验证码登录
    // 按钮组件
    import btn from "@/components/btn/btn";
    export default {
        name: "verifyLogin",
        data() {
            return {
                timeOut: 59,
                isSend: false,  // 是否已发送验证码,
                formData: {
                    mobile: '',  //  手机号
                    verifyCode: ''  // 验证码
                },

                colorStyle: '',

                isGiveWayMobile: true,
                isGiveWayVerify: true
            }
        },
        methods: {
            /*
            * 获取验证码
            * */
            sendVerify() {
                // 验证手机号码输入符合规则才可以发送验证码
                this.$validator.validate()
                    .then(valid => {
                        // 规则限制验证成功
                        if (valid) {
                            this.isSend = true

                            let timer = setInterval(() => {
                                this.timeOut -= 1
                                if (this.timeOut === 0) {
                                    clearInterval(timer)

                                    this.isSend = false
                                    this.timeOut = 59
                                }
                            }, 1000)

                            console.log(this.$store.state.verifyCode);
                        }
                    })
            },

            /*
            * 登录提交
            * */
            handleSubmit() {
                this.$validator.validate()
                    .then(valid => {
                        // 规则限制验证成功
                        if (valid) {
                            // 判断账号 验证码是否正确
                            const isMobile = this.formData.mobile === this.$store.state.mobile
                            const isVerify = this.formData.verifyCode === this.$store.state.verifyCode

                            // 手机号未注册
                            if (!isMobile) {
                                this.isGiveWayMobile = false
                            }
                            // 验证码错误
                            else if(!isVerify) {
                                this.isGiveWayVerify = false
                            } else {
                                // 登录成功
                                this.$router.replace({
                                    path: '/home',
                                    name: 'home'
                                })
                            }
                        }
                    })
            }
        },
        computed: {
            // 监听手机号输入是否为空， 为空时提交按钮将不能被点击
            user: function () {
                return !this.formData.mobile
            }
        },
        watch: {
            // 监听手机号输入是否合法，如果合法 获取验证码按钮就高亮显示(可点击)状态
          'formData.mobile': function (val) {
              if (val) {
                  this.$validator.validate().then(valid => {
                      if (valid) {
                          this.colorStyle = '#0f57d5'
                          return
                      }
                      this.colorStyle = '#c2c7cd'
                  })
              }
          }
        },
        components: {
            btn
        }
    }
</script>

<style lang="scss" scoped>
    .loginBar {
        form {

        }
    }
</style>